[TOC]

1 介绍

Headless Chrome是Chrome的无界面模式，提供不带浏览器界面的页面加载，信息抽取，页面内容截图等

操作Chrome使用 Chrome DevTools Protocol，它是Chrome DevTool使用的协议，可以允许通过API来操作Chromium、Chrome和其他基于Blink（基于Webkit）引擎的浏览器，Chrome DevTool团队维护这个API。

1.1 现在使用Chrome DevTools Protocol的项目 https://github.com/ChromeDevTools/awesome-chrome-devtools：

  • ChromeDriver 官方的Selenium/WebDriver的Chrome 实现

  • 编辑器扩展

    • VS Code
    • Sublime Web Inspector
    • WebStorm && Jetbrains Chrome Extension

  • 开发工具扩展

    • Chrome React Perf
    • React Developer Tools
    • VueJS Developer Tools
    • Redux DevTools
    • …

    ​

    优势

    • 资源占用少（相对于PhantomJS）
    • 服务端环境(命令行)
    • Web自动化
    • 支持现代Web标准和技术(ES6,ServiceWorkers,WebGL…)
    • 行为符合Web规范、版本能自动更新
    • Chronium/Chrome团队维护

2 Web自动化的需求

  • 自动化页面加载、爬取、执行
    • 数据抓取
    • 页面检测
  • 自动化页面测试
    • 功能测试
    • 回归测试

3 举步维艰的PhantomJS

3.1 PhantomJS做什么

3.2 PhantomJS 问题

  • 使用老版本的Webkit，不支持新的Web标准，跟真实浏览器存在差异

  • 开发者维护难度大，主要维护者不干了，起因是Chrome 将支持 Headless模式

  • 要解决的问题多，1800+

  • 内存占用高，并发有问题，不稳定，有些奇奇怪怪的bug

    ​

4 效率低下的Selenium

  • 使用WebDriver接口和浏览器驱动来操作真实浏览器，速度慢
  • 需要有图形界面，显示设备的支持
  • 需要使用Xvfb（virtual framebuffer X Server）
    • X 是架构无关的远程图形界面和输入设备兼容的系统，C/S架构
    • 在没有物理输入和显示设备的机器上运行
    • 这里可以简单理解为 虚拟显示器或者显示器模拟器
  • 也支持Headless实现，实现跟Web标准有差异
  • 通过ChromeDriver(WebDriver的Chrome实现)的来操作Chrome，需要依赖ChromeDriver的更新
    • 可以在ChromeDriver下载查看支持的Chrome版本
    • 目前支持Chrome v56-58，而Headless Chrome在Chrome 59才支持

5 其他类似的实现

  • PhantomJS 基于Webkit
  • SlimerJS 基于Gecko
  • CasperJS 驱动PhantomJS 和 SlimerJS
  • trifleJS 使用V8和.Net WebBrowser实现的无界面 IE
  • 其他自行实现类浏览器功能的库

6 相关开发项目

  • chrome-remote-interface
    • 是Chrome DevTools Protocol的NodeJS接口实现
    • 目前支持Google Chrome，Microsoft Edge，Node.js 6.3.0+,Safari(iOS)

7 参考资料

  1. Headless Chrome ReadMe
  2. Getting Started with Headless Chrome
  3. Headless Browsers
  4. 相关工具 awesome-chrome-devtools
  5. 技能树升级——Chrome Headless模式
  6. Headless Chrome入门
  7. 初探Headless Chrome
  8. Lighthouse
  9. Showcase Chrome Debugging Protocol Clients
  10. 依赖chrome-remote-interface的项目
  11. ChromeDevToolsProtocol
  12. chrome devtool protocol
  13. Chrome DevTools Protocol wiki
  14. chrome-remote-interface
  15. WebKitProtocol
  16. 5 Reasons I Chose Selenium over PhantomJS
  17. Running Headless Selenium with Chrome
  18. Headless Chrome Architecture
  19. vagrant
  20. Vagrant 基础全面解析
  21. 实战Chrome Headless数据抓取
  22. 使用 Headless Chrome 进行页面渲染
  23. Google 工程师带你入门 Headless Chrome
  24. FEX Chrome 远程调试协议分析与实战
  25. 【翻译】怎么在 macOS 上安装和使用 Headless Chrome
  26. How to install and use Headless Chrome on OSX
  27. Chromium 命令行参数说明文档
  28. Chromium 命令行参数列表
  29. Chrome 命令行参数开关源码
  30. Headless Browser Testing With Xvfb
  31. Headless Browser Testing with Chrome and Firefox
  32. X Window System
  33. HTMLUnitDriver & PhantomJS for Selenium Headless Testing
  34. RUNNING SELENIUM WITH THE NEW HEADLESS CHROME

最后更新： 2022年03月02日 03:32

原始链接： http://rawbin-.github.io/automatic/2017-06-01-headless-ui-test/

赏
× 赞赏这个人~
打赏二维码